<template>
    <div>
        {{ c }}
        <button type="button" @click="change">123</button>
        <button type="button" @click="change1">321</button>
    </div>
    <div>
        文本插值
        {{ str }}
    </div>
    <br>

    原始HTML
    <p>Using text interpolation:{{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <br>
    Attribute 绑定
    <div v-bind:id="dynamicId">v-bind:id="dynamicId":{{ ID }}</div>
    <div :id="dynamicId">:id="dynamicId":{{ ID }}</div>

</template>

<script>

export default {
    data() {
        let c = '1'
        let str = '1231';
        const ID = 'dynamicId'
        const rawHtml = '<span>123</span>'
        return {
            str,
            rawHtml,
            ID,
            c
        }
    },
    methods: {
        change() {
            this.c += '1';
        },
        change1() {
            this.c = '1';
        }
    }
}

</script>

<style></style>